 import React,{useState} from 'react'
 import './Search.css'
 import axios from 'axios'
 const Seatrch = () => {
    const [showContent, setShowContent] = useState(false);
    const [activeTab, setActiveTab] = useState('templates');
     const handleSearchClick = () => {
        setShowContent(true);
       
    };
    // 点别的地方关闭弹框
    const handleClickOutside = () => {
        setShowContent(false);
    }

    const handleTabClick = (tab) => {
        setActiveTab(tab);
    };
    // 调取后端接口




     
   return (
     <div>
       <div className="search-container">
            <input
                type="text"
                placeholder="2个及以上关键词描述你想要的设计"
                onClick={handleSearchClick}
                className="search-input"
                onChange={handleSearchClick}
            />
        <button onClick={handleSearchClick} className="search-button">搜索</button>
        </div>
        {showContent && (
            <div className="content-container">
                <div className="tabs">
                    <div
                        className={`tab ${activeTab === 'templates'? 'active' : ''}`}
                        onClick={() => handleTabClick('templates')}
                        data-tab="templates"
                    >
                        模板
                    </div>
                    <div
                        className={`tab ${activeTab ==='materials'? 'active' : ''}`}
                        onClick={() => handleTabClick('materials')}
                        data-tab="materials"
                    >
                        素材
                    </div>
                    <div
                        className={`tab ${activeTab ==='my-designs'? 'active' : ''}`}
                        onClick={() => handleTabClick('my-designs')}
                        data-tab="my-designs"
                    >
                        我的设计
                    </div>
                </div>
                <div
                    className={`tab-content ${activeTab === 'templates'? 'active' : ''}`}
                    id="templates"
                >
                    <div className="hot-search">
                        <h3 >热门搜索</h3>
                        <div onClick={handleClickOutside} className="hot-keyword">早安</div>
                        <div className="hot-keyword">春节</div>
                        <div className="hot-keyword">邀请函</div>
                        <div className="hot-keyword">新年</div>
                        <div className="hot-keyword">招聘</div>
                        <div className="hot-keyword">小红书</div>
                    </div>
                    <div className="scene-search">
                        <h3>按场景搜索</h3>
                        <div className="scene-keyword">手机海报</div>
                        <div className="scene-keyword">公众号首图</div>
                        <div className="scene-keyword">小红书配图</div>
                        <div className="scene-keyword">每日一签</div>
                        <div className="scene-keyword">全屏海报</div>
                        <div className="scene-keyword">邀请函</div>
                        <div className="scene-keyword">简历</div>
                        <div className="scene-keyword">公众号次图</div>
                        <div className="scene-keyword">长图海报</div>
                        <div className="scene-keyword">PPT16:9</div>
                        <div className="scene-keyword">名片</div>
                    </div>
                </div>
                <div
                    className={`tab-content ${activeTab ==='materials'? 'active' : ''}`}
                    id="materials"
                >
                
                <div className="scene-search">
                        <h3>我的素材</h3>
                        <div className="scene-keyword">手机海报</div>
                        <div className="scene-keyword">公众号首图</div>
                        <div className="scene-keyword">小红书配图</div>
                        <div className="scene-keyword">每日一签</div>
                        <div className="scene-keyword">全屏海报</div>
                        <div className="scene-keyword">邀请函</div>
                        <div className="scene-keyword">简历</div>
                        <div className="scene-keyword">公众号次图</div>
                        <div className="scene-keyword">长图海报</div>
                        <div className="scene-keyword">PPT16:9</div>
                        <div className="scene-keyword">名片</div>
                    </div>
                
                                </div>
                <div
                    className={`tab-content ${activeTab ==='my-designs'? 'active' : ''}`}
                    id="my-designs"
                >
                        <div className="scene-search">
                        <h3>我的设计</h3>
                        <div className="scene-keyword">手机海报</div>
                        <div className="scene-keyword">公众号首图</div>
                        <div className="scene-keyword">小红书配图</div>
                        <div className="scene-keyword">每日一签</div>
                        <div className="scene-keyword">全屏海报</div>
                        <div className="scene-keyword">邀请函</div>
                        <div className="scene-keyword">简历</div>
                        <div className="scene-keyword">公众号次图</div>
                        <div className="scene-keyword">长图海报</div>
                        <div className="scene-keyword">PPT16:9</div>
                        <div className="scene-keyword">名片</div>
                    </div>
        

                </div>
            </div>
        )}

     </div>
   )
 }
 
 export default Seatrch